<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="theme-color" content="#ffffff">
    <title>cp信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        h3 {
            font-size: 18px;
            margin: 10px 0;
            text-align: center;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr); /* 一行 7 格 */
            gap: 8px;
            padding: 10px;
        }
        .grid-container input {
            width: 100%;
            height: 40px;
            text-align: center;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .qihao {
            width: 100%;
            height: 40px;
            text-align: center;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-container {
            margin: 20px;
        }
        .button {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            color: #fff;
            background-color: #007bff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="form-container">
    <i>@if(!empty($abc)) {{$abc}} @endif</i>
    <form action="{{url('ssq/handle')}}" method="post">
        {{csrf_field()}}
        <b>期号:</b><input type="text" name="qihao" value="{{$qihao}}" class="qihao"><br />
        <b>1:</b>
        <div class="grid-container" id="row1">

            <input type="text" name="no1[]" maxlength="5">
            <input type="text" name="no1[]" maxlength="5">
            <input type="text" name="no1[]" maxlength="5">
            <input type="text" name="no1[]" maxlength="5">
            <input type="text" name="no1[]" maxlength="5">
            <input type="text" name="no1[]" maxlength="5">
            <input type="text" name="no1[]" maxlength="5">
        </div>
        <b>2:</b>
        <div class="grid-container" id="row2">
            <input type="text" name="no2[]" maxlength="5">
            <input type="text" name="no2[]" maxlength="5">
            <input type="text" name="no2[]" maxlength="5">
            <input type="text" name="no2[]" maxlength="5">
            <input type="text" name="no2[]" maxlength="5">
            <input type="text" name="no2[]" maxlength="5">
            <input type="text" name="no2[]" maxlength="5">
        </div>
        <b>3:</b>
        <div class="grid-container" id="row3">
            <input type="text" name="no3[]" maxlength="5">
            <input type="text" name="no3[]" maxlength="5">
            <input type="text" name="no3[]" maxlength="5">
            <input type="text" name="no3[]" maxlength="5">
            <input type="text" name="no3[]" maxlength="5">
            <input type="text" name="no3[]" maxlength="5">
            <input type="text" name="no3[]" maxlength="5">
        </div>
        <b>4:</b>
        <div class="grid-container" id="row4">
            <input type="text" name="no4[]" maxlength="5">
            <input type="text" name="no4[]" maxlength="5">
            <input type="text" name="no4[]" maxlength="5">
            <input type="text" name="no4[]" maxlength="5">
            <input type="text" name="no4[]" maxlength="5">
            <input type="text" name="no4[]" maxlength="5">
            <input type="text" name="no4[]" maxlength="5">
        </div>
        <b>5:</b>
        <div class="grid-container" id="row5">
            <input type="text" name="no5[]" maxlength="5">
            <input type="text" name="no5[]" maxlength="5">
            <input type="text" name="no5[]" maxlength="5">
            <input type="text" name="no5[]" maxlength="5">
            <input type="text" name="no5[]" maxlength="5">
            <input type="text" name="no5[]" maxlength="5">
            <input type="text" name="no5[]" maxlength="5">
        </div>
        <br />
        <b>multiple:</b><input type="text" name="multiple" value="5" class="qihao">
        <br />
        <input type="submit" class="button" >
    </form>
    <br>
    <br>
    <form action="{{url('ssq/copy')}}" method="post">
        {{csrf_field()}}
        <input type="submit" class="button" value="重复上期内容">
    </form>
    <div>
        <div><b>上期时间:</b>{{$qh_obj->time}}</div>
        <div><b>上期:</b>{{$qh_obj->qihao}}</div>
        <div><b>上期号:</b>{{$qh_obj->number}}</div>
        <div><b>上期1:</b>{{$qh_obj->no1money}}</div>
        <div><b>上期2:</b>{{$qh_obj->no2money}}</div>
        <div><b>数量:</b>{{$qh_obj->no1num}}</div>


    </div>
    <div>
        @foreach($buy_ssq as $key=>$b)
            <b>{{$key}}</b>
            @foreach($b as $buy)
                <p>{{$buy['no1']}}</p>
                <p>{{$buy['no2']}}</p>
                <p>{{$buy['no3']}}</p>
                <p>{{$buy['no4']}}</p>
                <p>{{$buy['no5']}}</p>
            @endforeach
        @endforeach
    </div>
    <div>
        {{$qh_obj->no1msg}}
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const inputs = document.querySelectorAll('input');

        inputs.forEach((input, index) => {
            input.addEventListener('input', (e) => {
                const value = e.target.value.replace(/\|/g, ''); // 移除已有的 |
                if (value.length >= 2) {
                    // 格式化数字并插入 |
                    // e.target.value = value.substring(0, 2).split('').join('|');

                    // 移动到下一个输入框
                    if (index + 1 < inputs.length) {
                        inputs[index + 1].focus();
                    }
                }
            });
        });
    });
</script>
</body>


</html>
